<template>
	<view style="padding: 2vw;">

		<!-- <view class="">
      {{page}}
    </view> -->

		<!-- 排序导航 -->
		<uni-segmented-control :current="order" :values="orders" @clickItem="changeOrder"></uni-segmented-control>

		<scroll-view class="list-view" scroll-y="true">
			<view class="" v-for="d in list">
				<!-- 无图模式 -->
				<view class="news-border" v-if="d.imgs.length==0">
					<text @click="showDetail(d.id)">{{d.title}}</text>
					<view class="news-footer">
						<text>{{d.source}}</text>
						<text>{{d.likes}}点赞</text>
						<text>{{d.comments}}评论</text>
						<text>{{ d.createdAt }}</text>
					</view>
				</view>
				<!-- 单图模式 -->
				<view class="news-border" v-else-if="d.imgs.length<3">
					<view class="news-img">
						<view class="info">
							<text @click="showDetail(d.id)">{{d.title}}</text>
							<view class="news-footer">
								<text>{{d.source}}</text>
								<text>{{d.likes}}点赞</text>
								<text>{{d.comments}}评论</text>
								<text>{{ d.createdAt }}</text>
							</view>
						</view>
						<view>
							<image class="img" lazy-load :src="d.imgs[0]" mode="widthFix" />
						</view>

					</view>


				</view>
				<!-- 三图模式 -->
				<view class="news-border" v-else>
					<view class="">
						<text @click="showDetail(d.id)">{{d.title}}</text>
						<view class="news-footer">
							<text>{{d.source}}</text>
							<text>{{d.likes}}点赞</text>
							<text>{{d.comments}}评论</text>
							<text>{{ d.createdAt }}</text>
						</view>
					</view>

					<view class="imgs">
						<image lazy-load :src="d.imgs[0]" mode="widthFix"></image>
						<image lazy-load :src="d.imgs[1]" mode="widthFix"></image>
						<image lazy-load :src="d.imgs[2]" mode="widthFix"></image>
					</view>

				</view>


			</view>

		</scroll-view>

		<uni-load-more :status="more" :content-text="moreText" @clickLoadMore="loadMore"></uni-load-more>

		<image @click="requery" class="refresh" src="/static/refresh.png" mode="widthFix"></image>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '@/js/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		query()
	})

	const showDetail = (id) => {
		uni.navigateTo({
			url: `/pages/news/detail?id=${id}`,
		})
	}

	const page = ref({
		"pageSize": 10,
		"pageNumber": 1,
	})

	const requery = () => {
		page.value.pageNumber = 1
		list.value = []
		query()
	}

	const order = ref(0)
	const orders = ref(['最新', '高赞', '最热', '热评'])

	const changeOrder = (event) => {
		page.value.pageNumber = 1
		order.value = event.currentIndex
		list.value = []
		query()
	}

	const queryInfo = ref({
		title: ''
	})

	const list = ref([])

	const more = ref('more')
	const moreText = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载中...",
		contentnomore: "我是有底线的"
	})

	const loadMore = () => {
		page.value.pageNumber++;
		if (page.value.pageNumber > page.value.pageCount) {
			more.value = 'noMore'
			return
		}
		query()
	}

	const query = () => {
		more.value = 'loading'
		api.get(
			`/autodata/query/news/${page.value.pageSize}/${page.value.pageNumber}/${order.value + 1}`, queryInfo
			.value,
			(data) => {
				if (data.success) {
					more.value = 'more'
					page.value = data.data.pageBean
					// 分离图片列表为数组
					data.data.list.forEach((item) => {
						item.imgs = item.imgs.split(',')
						item.createdAt = tools.formatDate(
							item.createdAt, 'MM-dd')
					})
					list.value = list.value.concat(data.data.list)
					return
				}
				uni.showModal({
					title: '错误',
					content: data.message
				})
			}
		)
	}
</script>

<style scoped>
	.imgs {
		display: flex;
		justify-content: space-around;
	}

	.imgs:deep(uni-image) {
		width: 30vw;
		margin: 0.5rem 0px;
	}

	.news-img {
		display: flex;
	}

	.news-img>.info {
		flex: 1;
	}

	.news-img:deep(uni-image),
	.img {
		width: 30vw;
		margin: 0.5rem 0px;
		max-height: 20vw;
	}

	.news-border {
		padding: 0.5rem 0px;
		border-bottom: 1px solid #dcdcdc;
	}

	.news-footer {
		font-size: 0.8em;
		color: #666;
		padding: 0.5rem 0px;
	}

	.news-footer:deep(uni-text) {
		margin-right: 0.2rem;
	}

	.refresh {
		width: 2rem;
		position: fixed;
		right: 1rem;
		bottom: calc(var(--window-bottom) + 1rem);
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}

	.list-view {
		max-height: 80vh;
	}
</style>